<script setup>
  import { computed } from 'vue';
import { ref } from 'vue';
const props = defineProps({
  title: {
    type: String,
    default: '任务详情'
  }
})

function toBack() {
  uni.navigateBack()
}
//弹出框
let show=ref(false)
function tapPopup(){
  show.value=!show.value
}
const data={
  0:['注册用户','忘记密码','联系客服','取消'],
  1:['已有账户','忘记密码','联系客服','取消'],
  2:['立即登录','忘记密码','联系客服','取消'],
  3:['接单规则','在线客服','邀请好友','取消']
}
let num=computed(()=>{
  if(props.title==='登录'){
    return 0
  }else if(props.title==="注册"){
    return 1
  }else if(props.title==="忘记密码"){
    return 2
  }else if(props.title === '任务详情'){
    return 3
  }
})
// 跳转
function goto(e){
  // console.log(e)
   if(e==="注册用户"){
    uni.navigateTo({url:'/pages/login/register' })
  }else if(e==="忘记密码"){
    uni.navigateTo({
      url:'/pages/login/forgot'
    })
  }else if(e==="取消"){
    show.value=!show.value
  }else if(e==="邀请好友"){
    uni.switchTab({
      url:'/pages/invite/invite'
    })
  }
  else if(e==="已有账户"||e==="立即登录"){
    uni.navigateTo({
      url:'/pages/login/login'
    })
  }
}
</script>

<template>
  <view class="nav-bar">
    <image
      src="http://recommender.starsky.fun/tpl/Public/xsm/img/fh.png"
      class="left-img"
      mode="scaleToFill"
      @click="toBack"
    />
    {{ title }}
    <image 
      v-if="title==='我发布的'?false:true"
      src="http://recommender.starsky.fun/tpl/Public/xsm/img/title_more.png"
      class="right-img"
      mode="scaleToFill"
      @click="tapPopup()"
    />
    <view class="popup" v-show="show" >
    				<view  class="popuplist" v-for="(item, index) in data[num]" :key="index" @click="goto(item)">
    				  {{item}}
    				</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.popup{
  background-color: #fff;
  border-radius: 5rpx;
  border:1rpx solid #faca2a;
  position: absolute;
  right: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 200rpx;
  border-radius: 10rpx;
  z-index: 99;
  .popuplist{
    height: 60rpx;
    line-height: 60rpx;
  }
}
.nav-bar {
  position: relative;
  height: 88rpx;
  padding: 0 20rpx;
  background-color: #faca2a;
  font-size: 32rpx;
  line-height: 88rpx;
  text-align: center;

  .left-img {
    position: absolute;
    left: 20rpx;
    top: 50%;
    transform: translate(0, -50%);
    width: 40rpx;
    height: 40rpx;
  }

  .right-img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 88rpx;
    height: 88rpx;
  }
}
</style>